*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body{
	font-size: 1.3rem;
	font-family: Roboto, Arial, sans-serif;
	background-color: rgb(240, 242, 245);
	color: #1c1e21;
	line-height: 1.34;
}

.container{
	min-height: 100vh;
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.text{
	flex-basis: 40%;
}

.text h1{
	font-size: 4rem;
    color: #1877f2;
}

.text p{
	color: black;
	font-size: 1.6rem;
}

.login-form form{
     display: grid;
     grid-template-columns: 1fr;
     grid-template-rows: 50px 50px 50px 30px 10px 70px;
     background-color: white;
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
	width: 350px;
	height: 310px;
	border-radius: 8px;
	justify-content: space-evenly;
	justify-items: center;
	align-items: center;
	align-content: start;
	gap: 5px;
     padding: 15px;
     flex-basis: 70%;
}

.child{
	justify-self: center;
	align-self: center; 
}

.bar{
	height: 40px; 
	width:320px;
	border-radius: 5px;
}

hr{
	border: none;
	width: 300px;
     height: 1px;
     background-color: #d1d3d8;
     margin: 10px 0;
}

#log{
	background-color: #1877f2; 
	color:white; 
	font-weight: 700;
	border: 2px solid #1877f2; 
	cursor: pointer;
	transition: 0.3s;
}

#log:hover {
     background-color: #1a82f7;
}

.pass{
	font-size:14px;
	color: #1877f2;
	text-decoration: none;
}

.pass:hover {
     text-decoration: underline;
}

.account{
	width: 52%; 
	height: 40px; 
	background-color: rgb(66, 183, 42); 
	color: white; 
	border: none;
	border-radius: 5px; 
	font-size: 15px;
     font-weight: bold;
     transition: 0.3s;
}

.account:hover {
	cursor: pointer;
	background-color: rgb(48, 163, 38);
}

input{
	border: 2px solid lightgray; 
	padding: 10px;
	color: rgb(28, 30, 33);
}

input:focus{
      border: 1px solid #166FE5;
      outline: none;
      box-shadow: 0 0 0 2px rgba(22, 111, 229, 0.2);
      transition: all 0.2s ease-in-out;
      background-color: #FFFFFF;
}

input::placeholder {
	color: rgb(148, 150, 153);
}

input:focus::placeholder {
	 color: rgb(170, 172, 175);
	opacity: 1;
}

@media screen and (max-width:900px) {
   .container{
   	flex-direction: column;
   }
   .text{
   	width: 70%;
   	text-align: center;
   }
   .login-form{
      margin-top: -30px;
   }
}